<!-- src/views/Login.vue -->
<template>
  <!-- 主容器：居中 + 背景图 -->
  <div class="login-container">
    <!-- 表单卡片：居中浮动 + 透明化 -->
    <div class="form-card">
      <!-- 切换登录/注册 -->
      <div class="tab-header">
        <div
          :class="['tab-item', { active:!isRegister }]"
          @click="isRegister = false; clearRegisterData()"
        >
          登录
        </div>
        <div
          :class="['tab-item', { active: isRegister }]"
          @click="isRegister = true; clearRegisterData()"
        >
          注册
        </div>
      </div>

      <!-- 注册表单 -->
      <el-form
        ref="form"
        size="large"
        autocomplete="on"
        v-if="isRegister"
        :model="registerData"
        :rules="rules"
        class="form-content"
      >
        <el-form-item>
          <h2 class="form-title">创建账号</h2>
        </el-form-item>
        <el-form-item prop="username">
          <el-input
            :prefix-icon="User"
            placeholder="请输入用户名"
            v-model="registerData.username"
            class="input-custom"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
            v-model="registerData.password"
            class="input-custom"
          />
        </el-form-item>
        <el-form-item prop="rePassword">
          <el-input
            :prefix-icon="Lock"
            type="password"
            placeholder="请再次输入密码"
            v-model="registerData.rePassword"
            class="input-custom"
          />
        </el-form-item>
        <!-- 修改后的角色选择 -->
        <el-form-item prop="role" class="role-selector">
          <div class="role-options">
            <div
              v-for="role in roles"
              :key="role.value"
              :class="['role-option', { 'active': registerData.role === role.value }]"
              @click="registerData.role = role.value"
            >
              <div class="role-icon">
                <component :is="role.icon" />
              </div>
              <div class="role-label">{{ role.label }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="btn-custom"
            @click="register"
          >
            注册
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 登录表单 -->
      <el-form
        ref="form"
        size="large"
        autocomplete="off"
        v-else
        :model="registerData"
        :rules="rules"
        class="form-content"
      >
        <el-form-item>
          <h2 class="form-title">Welcome to 心理咨询管理系统</h2>
        </el-form-item>
        <el-form-item prop="username">
          <el-input
            :prefix-icon="User"
            placeholder="请输入用户名"
            v-model="registerData.username"
            class="input-custom"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            :prefix-icon="Lock"
            type="password"
            placeholder="请输入密码"
            v-model="registerData.password"
            class="input-custom"
          />
        </el-form-item>
        <!-- 修改后的角色选择 -->
        <el-form-item prop="role" class="role-selector">
          <div class="role-options">
            <div
              v-for="role in roles"
              :key="role.value"
              :class="['role-option', { 'active': registerData.role === role.value }]"
              @click="registerData.role = role.value"
            >
              <div class="role-icon">
                <component :is="role.icon" />
              </div>
              <div class="role-label">{{ role.label }}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="btn-custom"
            @click="login"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Lock, User, Avatar, Setting, School } from "@element-plus/icons-vue";
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { userLogin } from "../api/mock.ts";

const isRegister = ref(false);
const registerData = ref({
  username: "",
  password: "",
  rePassword: "",
  role: ""
});

// 定义角色选项
const roles = ref([
  { label: "前台中心助理", value: "frontdesk", icon: Avatar },
  { label: "管理员", value: "admin", icon: Setting },
  { label: "心理教师", value: "teacher", icon: School }
]);

const checkRePassword = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次确认密码"));
  } else if (value!== registerData.value.password) {
    callback(new Error("两次密码不一致"));
  } else {
    callback();
  }
};

const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 5, max: 16, message: "长度为 5-16 位", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 5, max: 16, message: "长度为 5-16 位", trigger: "blur" }
  ],
  rePassword: [
    { required: true, message: "请再次输入密码", trigger: "blur" },
    { validator: checkRePassword, trigger: "blur" }
  ],
  role: [
    { required: true, message: "请选择角色", trigger: "change" }
  ]
};

const router = useRouter();
const form = ref(null);

const register = async () => {
  form.value.validate((valid) => {
    if (valid) {
      ElMessage.success("已注册成功");
      isRegister.value = false;
      clearRegisterData();
    }
  });
};

const login = () => {
  form.value.validate((valid) => {
    if (valid) {
      userLogin(registerData.value).then((res) => {
        if (res.status) {
          localStorage.setItem('role', registerData.value.role);
          ElMessage.success(res.message || "登录成功！");
          router.push("/index");
        } else {
          ElMessage.error(res.message);
        }
      });
    }
  });
};

const clearRegisterData = () => {
  registerData.value = {
    username: "",
    password: "",
    rePassword: "",
    role: ""
  };
};
</script>

<style lang="scss" scoped>
/* 全局容器：覆盖整个视口，直接显示背景图 */
.login-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 可替换为你需要的背景图 */
  background: url('../assets/flower.jpg') no-repeat center/cover;
}

/* 表单卡片：浮动居中 + 透明背景 */
.form-card {
  position: relative;
  width: 420px;
  /* 透明化：调整 rgba 的 alpha 值控制透明度 */
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  overflow: hidden;
  transition: all 0.3s ease;

  /* 响应式适配：小屏幕缩小 */
  @media (max-width: 576px) {
    width: 90%;
  }
}

/* 选项卡切换（登录/注册） */
.tab-header {
  display: flex;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid #eee;

  .tab-item {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;

    &.active {
      color: #87c080;
      background: #fff;
      box-shadow: 0 -2px 0 #87c080 inset;
    }

    &:hover {
      background: #f8f9fd;
    }
  }
}

/* 表单内容区域 */
.form-content {
  padding: 30px 40px;

  .form-title {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 600;
    color: #333;
    text-align: center;
  }

  .input-custom {
    --el-input-bg-color: rgba(255, 255, 255, 0.8);
    --el-input-border-color: #ddd;
    --el-input-hover-border-color: #bbb;
    transition: all 0.3s ease;
  }

  .btn-custom {
    width: 100%;
    --el-button-bg-color: #87c080;
    --el-button-hover-bg-color: #9bd194;
    --el-button-active-bg-color: #7eb378;
    transition: all 0.3s ease;
  }

  /* 角色选择器样式 - 调整间距 */
  .role-selector {
    margin: 10px 0 15px 0; /* 上边距调整为-10px，与上方元素对齐 */

    .role-options {
      display: flex;
      justify-content: space-between;
      gap: 10px;

      .role-option {
        flex: 1;
        padding: 24px;
        border: 1px solid #ddd;
        border-radius: 8px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background-color: rgba(255, 255, 255, 0.8);

        &:hover {
          border-color: #87c080;
          box-shadow: 0 2px 8px rgba(135, 192, 128, 0.2);
        }

        &.active {
          border-color: #87c080;
          background-color: rgba(135, 192, 128, 0.1);
        }

        .role-icon {
          font-size: 0px;
          margin-bottom: -24px;
          color: #87c080;
        }

        .role-label {
          font-size: 14px;
          color: #333;
        }
      }
    }
  }
}
</style>